<template>
  <div class="legend-item">
    <input
      type="checkbox"
      :name="'legend-' + id"
      :id="id"
      v-model="checked"
      @change="routeCheckStatus"
    />
    <label :for="id">
      <i class="icon" :class="iconNameOfVisibility"></i>
      <div
        class="legend-color-plate"
        :style="{ 'background-color': color }"
        :class="disabled"
      ></div>
      <div class="legend-text-wrapper">
        <span class="text">{{ title }}</span>
      </div>
    </label>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      disabled: "disabled",
      checked: false,
      iconNameOfVisibility:"icon-hide"
    };
  },
  props: {
    color: {
      type: String,
      default: "",
      required: true,
    },
    title: {
      type: String,
      default: "",
      required: true,
    },
    id: {
      type: String,
      required: true,
    },
  },
  methods: {
    routeCheckStatus() {
      if (this.checked) {
        this.checked = true;
        this.disabled = null;
        this.$emit("on-checked");
        this.iconNameOfVisibility = 'icon-show';
      } else {
        this.checked = false;
        this.disabled = 'disabled';
        this.$emit("on-unchecked");
        this.iconNameOfVisibility = 'icon-hide';
      }
    },
  },
};
</script>

<style lang="less" scoped>

</style>